<template>
  <div class="perform-detail-wrapper">
    <!-- <div class="bread">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/performance/overview' }"
          >顾问绩效管理</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/performance/performanceList' }"
          >顾问绩效</el-breadcrumb-item
        >
        <el-breadcrumb-item>绩效详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div> -->
    <div class="wrapper">
      <div class="header">
        <div class="arrow" @click="handleClickBack">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="page-name">{{ consultantInfo.consultantName }}绩效详情</div>
        <div class="header-item">
          <div class="title">用户评价历史总评分</div>
          <div class="value">{{ historyData.userRate }}分</div>
        </div>
        <div class="header-item">
          <div class="title">用户历史总报告数</div>
          <div class="value">{{ historyData.reportCount }}份</div>
        </div>
        <div class="header-item">
          <div class="title">用户历史总案例数</div>
          <div class="value">{{ historyData.caseCount }}份</div>
        </div>
        <div class="header-item">
          <div class="title">历史咨询总人数</div>
          <div class="value">{{ historyData.serverCount }}人</div>
        </div>
        <div class="header-item">
          <div class="title">历史服务人数</div>
          <div class="value">{{ historyData.personCount }}人</div>
        </div>
        <div class="header-item">
          <div class="title">历史服务次数</div>
          <div class="value">{{ historyData.reportCount + historyData.caseCount }}人</div>
        </div>
      </div>
      <div class="container">
        <div class="menu-box">
          <el-scrollbar class="el-scrollbar-x-hidden">
            <elan-menu
              :collapse="false"
              :list="menuList"
              class="elan-menu"
              :collapse-transition="true"
              :props="props"
              router
            ></elan-menu>
          </el-scrollbar>
        </div>
        <div class="main-content">
          <div class="inner-content">
            <router-view
              :consultantInfo="consultantInfo"
              :cardTypeOptions="cardTypeOptions"
              :historyData="historyData"
            ></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import page from "@/mixin/page";
import { performanceHistoryData, performanceTypes } from "@/api";
export default {
  components: {
    ElanMenu: () => import("@/components/ElanMenu/index"),
  },
  mixins: [page],
  data() {
    return {
      consultantInfo: null,
      historyData: {},
      cardTypeOptions: [],
      props: {
        path: "url",
        children: "permissionChildList",
        title: "name",
        parentid: "parentid",
        icon: "icon",
      },
      menuList: [
        // {
        //   hideFlag: 1,
        //   icon: "personal",
        //   name: "个人绩效总览",
        //   url: "/performance/performanceDetail/personalOverview",
        // },
        {
          hideFlag: 1,
          icon: "evaluate",
          name: "用户评价",
          url: "/performance/performanceDetail/userAssessment",
        },
        {
          hideFlag: 1,
          icon: "case",
          name: "用户报告数",
          url: "/performance/performanceDetail/parseReportNum",
        },
        {
          hideFlag: 1,
          icon: "card2",
          name: "用户案例数",
          url: "/performance/performanceDetail/userCaseNum",
        },
        {
          hideFlag: 1,
          icon: "TV",
          name: "绑定用户数",
          url: "/performance/performanceDetail/bindsUserNum",
        },
        {
          hideFlag: 1,
          icon: "service",
          name: "服务用户数",
          url: "/performance/performanceDetail/serviceUserNum",
        },
        {
          hideFlag: 1,
          icon: "myTime",
          name: "回复及时率",
          url: "/performance/performanceDetail/timelyRate",
        },
      ],
    };
  },
  created() {
    this.consultantInfo =
      JSON.parse(sessionStorage.getItem("consultantInfo")) || null;
    this.performanceHistoryDataFn();
    this.performanceTypesFn();
  },
  mounted() {},
  methods: {
    performanceHistoryDataFn() {
      const params = {
        consultantId: this.consultantInfo.consultantId,
      };
      performanceHistoryData(params).then((res) => {
        if (res.code == 200) {
          this.historyData = res.data;
        }
      });
    },
    performanceTypesFn() {
      const params = {
        consultantId: this.consultantInfo.consultantId,
      };
      performanceTypes(params).then((res) => {
        if (res.code == 200) {
          this.cardTypeOptions = res.data;
          this.cardTypeOptions.unshift({
            cardType: "",
            cardTypeName: "全部",
          });
        }
      });
    },
    handleClickBack() {
      this.$router.replace("/performance/performanceList");
    },
  },
};
</script>

<style lang="scss" scoped>
.perform-detail-wrapper {
  background: url("../../../assets/images/performBg.png") no-repeat;
  background-position: center;
  background-size: 100% 100%;
  padding-top: 54px;
  height: 100%;
  .bread {
    margin: 12px 0 12px 24px;
    ::v-deep .content-wrapper .content .el-breadcrumb {
      padding: 0;
      background-color: transparent;
    }
    ::v-deep .el-breadcrumb__separator {
      color: #000;
    }
    ::v-deep .el-breadcrumb__inner {
      color: #8892a6;
    }
    ::v-deep .el-breadcrumb__item:last-of-type .el-breadcrumb__inner {
      color: #222;
    }
  }
  .wrapper {
    margin: 0 24px;
    height: calc(100% - 18px);
    .header {
      border-radius: 8px 8px 0 0;
      background-color: #fff;
      padding: 22px 0 22px 20px;
      display: flex;
      align-items: center;
      .arrow {
        width: 36px;
        height: 36px;
        background: #eeeeee;
        border-radius: 9px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 16px;
        font-size: 20px;
        font-weight: bolder;
        cursor: pointer;
      }
      .page-name {
        font-size: 20px;
        color: #222;
      }
      &-item {
        display: flex;
        align-items: center;
        margin-left: 31px;
        font-size: 16px;
        .title {
          color: #999999;
        }
        .value {
          color: #222;
          margin-left: 8px;
          font-size: 20px;
          font-family: PingFangSC, PingFang SC;
        }
      }
    }
    .container {
      display: flex;
      height: calc(100% - 65px);
      .menu-box {
        width: 196px;
        flex-shrink: 0;
        background-color: #fff;
        height: 100%;
        ::v-deep .el-menu {
          border-right: none !important;
          background: #fff;

          .el-menu-item {
            padding: 0 0 0 12px !important;
            margin-left: 12px;
            color: #9a9a9a;
            font-size: 16px;
            height: 41px;
            line-height: 38px;
            &:hover {
              background-color: #f0f2f5;
              border-radius: 6px;
              color: #222;
            }
            &.is-active {
              background-color: $primary-color;
              border-radius: 6px;
              color: #fff;
              font-weight: 600;
              &::before {
                content: "";
                display: inline-block;
                width: 4px;
                height: 100%;
                background-color: $primary-color;
                position: absolute;
                left: -12px;
                top: 50%;
                transform: translateY(-50%);
              }
            }
          }
          .el-submenu {
            .el-submenu__title {
              padding: 0 16px 0 26px !important;
              color: #8892a6;
              font-weight: 600;
              font-size: 16px;

              &:hover {
                background: #f0f2f5 !important;
                color: #222;
              }
            }
          }
          .el-submenu.is-active .el-submenu__title {
            color: #222;
            i {
              color: #222;
            }
          }
        }
      }
      .main-content {
        background-color: #fff;
        width: 0;
        flex: 1;
        .inner-content {
          padding: 14px 0 0 14px;
          background: #f2f5fa;
          box-shadow: inset 4px 4px 11px 2px rgba(118, 170, 244, 0.18);
          border-radius: 8px 0 0 0;
        }
      }
    }
  }
}
</style>
